<template>
	<view class="company-box">
		<view class="select-company-box">
			<view class="company-list flex flai" v-for="(item,index) in list" :key="index">
				<image :src="item.avatar" mode="" class="logo"></image>
				<view class="compony-info flex1">
					<text class="name line-clamp-one">{{item.name}}</text>
					<text class="line-clamp-two desc">{{item.desc}}</text>
				</view>
				<view class="select" @click="selectCompanyResult(index,item.id)">
					<image src="../../static/img/selectz.png" mode="" v-if="index==active"></image>
					<image src="../../static/img/noSelectz.png" mode="" v-else></image>
				</view>
			</view>
		</view>
		<div class="need-know">
			<view class="need-title flex flai fljc">
				<view class="line"></view>
				<view class="title">跑腿须知</view>
				<view class="line"></view>
			</view>
			<view class="need-know-con">
				{{needKnow}}
			</view>
		</div>
	</view>
</template>

<script>
	import API from '../../api/index.js'
	export default {
		data() {
			return {
				list:[],
				page:1,
				active:0,
				id:null,
				needKnow:''
			}
		},
		onLoad(opt) {
			console.log(opt)
			console.log(this)
			this.id = opt.id
			this.getList()
		
		},
		methods: {
			selectCompanyResult(index,id) {
				console.log(index)
				this.active = index
				console.log(this.list[index])
				uni.setStorageSync('companyInfo',this.list[index])
				API.indexHome.selectCompany({errandId:id}).then(res=>{
					if (res.errno==0) {
						uni.switchTab({
						    url: '/pages/writeOrder/writeOrder'
						});
					}
				})
			
			},
			getList () {
				var data ={
					page:this.page,
					size:10
				}
				API.indexHome.companyList().then(res=>{
					if (res.errno=='0') {
						var data = res.data.rows
						for (var k in data) {
							if (data[k].id==this.id) {
								this.active = k
							}
							delete data[k].content
						}
						this.needKnow = res.data.notice
						this.list = data
					}
				})
				
			}
		}
	}
</script>

<style>
.company-box {
	width: 702rpx;
	margin:24rpx auto;
}
.company-list{
	width: 702rpx;
	height: 188rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	position: relative;
	padding: 30rpx;
	box-sizing: border-box;
	margin-bottom: 24rpx;
}
.company-list .select {
	position: absolute;
	right: 0;
	top:0;
}
.company-list .select image{
	width: 60rpx;
	height: 50rpx;
}

.company-list .logo {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-right: 24rpx;
	background: #F7F8F9;
	
}
.compony-info .name {
	font-size: 28rpx;
	margin-right: 90rpx;
}
.compony-info .desc{
	color: #999999;
	font-size: 26rpx;
	margin-top: 10rpx;
}
.need-title {
	margin-top: 24rpx;
	margin-bottom: 24rpx;
	font-size: 32rpx;
	position: relative;
	text-align: center;
}
.need-title .line:nth-child(1){
	width: 40rpx;
	height: 1px;
	background-color: #999;
	
}
.need-title .line:nth-child(3){

	width: 40rpx;
	height: 1px;
	background-color: #999;

}
.need-title .title {
	margin:0 10rpx;
}
.need-know-con {
	width: 702rpx;
	min-height: 120rpx;
	font-size: 28rpx;
	line-height: 40rpx;
	color: #666666;

}
</style>
